<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./../../resources/templates/template.xhtml">

    <ui:define name="header">
        <h:outputScript library="scripts" name="primefaces-locale.js"/>

        <style type="text/css">
            .bottom-command-right
            {
                width: 100%;
                text-align: right;
                padding-right: 10px;
            }
            .no-resize
            {
                max-height: 200px;
                overflow-y: scroll;
            }
            .error-message
            {
                color: #000;
            }
        </style>

        <script type="text/javascript">
            
            
            function handleAction(xhr, status, args){
                switch(args.key){
                    case 'atualizado': 
                        dlgEvent.hide();
                        break;
                    case 'redirecionar':
                        redirect('novoEvento.xhtml');
                        break;
                    case 'novo':
                    case 'editar':
                        dlgEvento.show();
                        break;
                }
            }
            
            function redirect(url){

                window.location.href = url;
            }
        </script>
    </ui:define>

    <ui:define name="content">

        <h:form id="frmEventos" 
                enctype="multipart/form-data">

            <p:growl id="gMessages" 
                     globalOnly="true"
                     redisplay="false"
                     sticky="false" />
            <p:outputPanel id="opTabview">

                <p:tabView dynamic="true"
                           rendered="#{not eventoBean.exibirFormNovo}">

                    <p:ajax event="tabChange" 
                            listener="#{eventoBean.onTabChange}" />

                    <p:tab id="tabTabela" 
                           title="Tabela">
                        <div class="bottom-command-right">
                            <p:commandButton alt="Criar novo evento" 
                                             value="Novo"
                                             icon="ui-icon-circle-plus"
                                             iconPos="left"
                                             actionListener="#{eventoBean.onNovoEventoClick}"
                                             update=":frmEventos:opTabview :frmEventos:opFormNovo"
                                             process="@this">
                                <f:setPropertyActionListener target="#{eventoBean.novo}"
                                                             value="#{true}" />

                                <f:setPropertyActionListener target="#{eventoBean.exibirFormNovo}"
                                                             value="#{true}" />
                            </p:commandButton>
                        </div>
                        <p:dataTable id="dtEventos" 
                                     value="#{eventoBean.eventos}"
                                     var="evento"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5, 10"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

                            <p:column>
                                <f:facet name="header">
                                    Editar
                                </f:facet>
                                <p:commandButton id="cbEditarEvento" 
                                                 alt="Editar este evento" 
                                                 icon="ui-icon-pencil"
                                                 update=":frmEventos:opTabview :frmEventos:opFormNovo"
                                                 action="#{eventoBean.onEditarEventoClick}"
                                                 process="@all">
                                    <f:setPropertyActionListener target="#{eventoBean.evento}"
                                                                 value="#{evento}" />

                                    <f:setPropertyActionListener target="#{eventoBean.novo}"
                                                                 value="#{false}" />

                                    <f:setPropertyActionListener target="#{eventoBean.exibirFormNovo}"
                                                                 value="#{true}" />
                                </p:commandButton>
                            </p:column>


                            <p:column>
                                <f:facet name="header">
                                    Excluir
                                </f:facet>
                                <p:commandButton alt="Excluir este evento" 
                                                 icon="ui-icon-close"
                                                 process="@this"/>
                            </p:column>


                            <p:column>
                                <f:facet name="header">
                                    Evento
                                </f:facet>
                                <h:outputLabel value="#{evento.nmeEvento}"
                                               styleClass="t3"/>
                                <p:separator />
                                <h:outputLabel value="#{evento.dscEvento}" />
                                <p:separator />
                                <p:panelGrid columns="2"
                                             styleClass="gridNoLine">
                                    <p:button outcome="gerenciarAtividades" 
                                              value="Atividades"
                                              style="margin-top: 5px; margin-bottom: 5px;">
                                        <f:param name="ie" value="#{evento.idtEvento}" />
                                        <f:param name="pp" value="gerenciarEvento" />
                                    </p:button>
                                    <p:button outcome="gerenciarParticipantes" 
                                              value="Participantes"
                                              style="margin-top: 5px; margin-bottom: 5px;">
                                        <f:param name="ie" value="#{evento.idtEvento}" />
                                        <f:param name="pp" value="gerenciarEvento" />
                                    </p:button>
                                </p:panelGrid>
                            </p:column>
                        </p:dataTable>
                    </p:tab>
                    <p:tab id="tabCalendario"
                           title="Calendário">
                        <p:schedule value="#{eventoBean.customScheduleModel}"
                                    widgetVar="schEventos"
                                    draggable="false"
                                    resizable="false">
                        </p:schedule>
                    </p:tab>
                </p:tabView>
            </p:outputPanel>
            <p:outputPanel id="opFormNovo">
                <p:panel id="pFormNovo" 
                         header="Dados do evento" 
                         rendered="#{eventoBean.exibirFormNovo}"
                         styleClass="gridNoLine">

                    <p:messages id="mEvento" 
                                closable="true"
                                autoUpdate="true"
                                redisplay="false" />
                    <p:panelGrid columns="2">

                        <h:outputLabel value="* Nome:" />
                        <p:inputText value="#{eventoBean.evento.nmeEvento}"
                                     required="true"
                                     requiredMessage="Informe o nome do evento."
                                     maxlength="80"/>

                        <h:outputLabel value="* Tipo:" />
                        <p:selectOneMenu value="#{eventoBean.evento.tdTipoEvento}"
                                         required="true"
                                         requiredMessage="Selecione o tipo de evento.">
                            <f:converter converterId="tipoEventoConversor" />
                            <f:selectItem itemLabel="Selecione..."
                                          itemValue="" />
                            <f:selectItems value="#{eventoBean.tiposEvento}"
                                           var="tipo"
                                           itemLabel="#{tipo.nmeTipoEvento}"
                                           itemValue="#{tipo}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="* Descrição:" />
                        <p:inputTextarea value="#{eventoBean.evento.dscEvento}"
                                         required="true"
                                         requiredMessage="Informe o descrição do evento."
                                         maxlength="250"
                                         styleClass="no-resize"/>

                        <h:outputLabel value="* Públicos:" />
                        <p:selectCheckboxMenu label="Selecione..."
                                              required="true"
                                              requiredMessage="Selecione um ou mais públicos do evento."
                                              value="#{eventoBean.evento.publicos}">
                            <f:converter converterId="publicoConversor" />
                            <f:selectItems value="#{eventoBean.publicos}"
                                           var="publico"
                                           itemLabel="#{publico.nmePublico}"
                                           itemValue="#{publico}"/>
                        </p:selectCheckboxMenu>


                        <h:outputLabel value="* Itens de avaliação:" />
                        <p:selectCheckboxMenu label="Selecione..."
                                              required="true"
                                              requiredMessage="Selecione um ou mais itens de avaliação para o evento."
                                              value="#{eventoBean.evento.itensAvaliacao}">
                            <f:converter converterId="itemAvaliacaoConversor"/>
                            <f:selectItems value="#{eventoBean.itensAvaliacao}"
                                           var="item"
                                           itemLabel="#{item.nmeItemAvaliacao}"
                                           itemValue="#{item}"/>
                        </p:selectCheckboxMenu>


                        <h:outputLabel value="* Data de início:" />
                        <p:calendar id="cDataInicio" 
                                    value="#{eventoBean.evento.dtaInicioEvento}" 
                                    showOn="button"
                                    locale="pt" 
                                    required="true"
                                    requiredMessage="Selecione a data de início do evento."
                                    pattern="dd/MM/yyyy HH:mm"
                                    stepMinute="10"
                                    label="Data de início:">
                            <p:ajax event="dateSelect"
                                    update=":frmEventos:cDataTermino" /> 
                        </p:calendar>

                        <h:outputLabel value="* Data de término:" />
                        <p:calendar id="cDataTermino"
                                    value="#{eventoBean.evento.dtaTerminoEvento}" 
                                    showOn="button"
                                    locale="pt"
                                    required="true"
                                    requiredMessage="Selecione a data de término do evento."
                                    mindate="#{eventoBean.evento.dtaInicioEvento}"
                                    minHour="#{eventoBean.evento.dtaInicioEvento.hours}"
                                    pattern="dd/MM/yyyy HH:mm"
                                    stepMinute="10"
                                    label="Data de término:">
                            <p:ajax event="dateSelect"
                                    update=":frmEventos:cDataInicio" /> 
                        </p:calendar>

                        <p:panelGrid columns="2"
                                     styleClass="gridNoLine">
                            <p:panelGrid columns="1"
                                         styleClass="gridNoLine"
                                         rendered="#{not eventoBean.novo}">
                                <h:outputLabel value="Imagem atual:" />
                                <p:graphicImage library="images"
                                                name="#{evento.urlImagemEvento}"
                                                alt="#{evento.nmeEvento}" />
                            </p:panelGrid>
                            <p:panelGrid columns="2"
                                         styleClass="gridNoLine">
                                <h:outputLabel value="Imagem:" />
                                <p:fileUpload fileUploadListener="#{eventoBean.onFileUpload}" 
                                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                              invalidFileMessage="Formato de arquivo inválido."
                                              invalidSizeMessage="Tamanho máximo excedido."
                                              sizeLimit="200000"
                                              styleClass="error-message"
                                              multiple="false"/>
                            </p:panelGrid>
                        </p:panelGrid>

                        <!-- Marcador -->
                        
                        <p:commandButton value="Voltar"
                                         icon="ui-icon-arrow-1-w"
                                         iconPos="left"
                                         update=":frmEventos:opTabview :frmEventos:opFormNovo"
                                         immediate="true">
                            <f:setPropertyActionListener target="#{eventoBean.exibirFormNovo}"
                                                         value="#{false}" />
                        </p:commandButton>
                        <p:commandButton value="Salvar"
                                         process=":frmEventos:opFormNovo"
                                         update=":frmEventos"
                                         actionListener="#{eventoBean.onSalvar}"/>
                    </p:panelGrid>
                </p:panel>
            </p:outputPanel>
        </h:form>
    </ui:define>
</ui:composition>
